<template>
    <el-dialog :title="title" :visible="true" width="600px" center :lock-scroll="true" :close-on-press-escape="false"
        :close-on-click-modal="false" top="40px" @close="cancel">
        <el-form label-width="100px">
            <el-form-item label="账号" required>
                <el-input v-model="formData.account" :disabled="type === 'edit'" placeholder="请输入手机号或邮箱" />
            </el-form-item>

            <el-form-item label="密码" required v-if="type === 'add'">
                <el-input v-model="formData.password" type="password" placeholder="请输入密码（至少6位）" :show-password="true">
                </el-input>
            </el-form-item>


            <el-form-item label="姓名" required>
                <el-input v-model="formData.name" placeholder="请输入姓名" />
            </el-form-item>

            <el-form-item label="性别">
                <el-select v-model="formData.gender">
                    <el-option v-for="item in genderList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="证件照 / 头像">
                <upload-picture :url.sync="formData.avatar" prefix="user/avatar">
                    <div>建议图片长宽比为 1:1</div>
                </upload-picture>
            </el-form-item>

    

            <el-form-item label="身份证号">
                <el-input v-model="formData.idNumber" placeholder="请输入身份证号码" />
            </el-form-item>

            <el-form-item label="工作单位">
                <el-input v-model="formData.workUnit" placeholder="请填写工作单位" />
            </el-form-item>

            <el-form-item label="职位">
                <el-input v-model="formData.position" placeholder="请填写职位" />
            </el-form-item>
   


        </el-form>
        <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>

import { DEFAULTAVATAR } from "@/utils/const.js"
export default {
    props: ['visible'],
    data() {
        return {
            showPassword: false,
            formData: {
                password: "",
                account: "",
                gender: "男",
                avatar: DEFAULTAVATAR,
                idNumber: "",
                workUnit: '',
                position: '',

            },
            type: "add",
            genderList: [
                { value: "男", label: "男" },
                { value: "女", label: "女" },
            ],

        }
    },
    computed: {
        title() {
            if (this.type === "add") {
                return "新增用户"
            } else {
                return "编辑用户"
            }
        }
    },
    methods: {

        init(type, data) {
            this.type = type;
            this.formData = {
                account: "",
                password: "",
                type: "normal",
                idNumber: "",
                gender: "男",
            }


            if (type === "edit") {
                this.formData = data;
            }
        },


        togglePasswordVisibility() {
            this.showPassword = !this.showPassword;
        },


        async submitForm() {

            const { name, account, password } = this.formData;
            let rules = [
                {
                    case: !name,
                    message: "请输入姓名",
                },
                {
                    case: !account,
                    message: "请输入账号",
                },
                {
                    case: !(/^(\d{11})|([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(account)),
                    message: "请输入有效的手机号或邮箱",
                },

            ]
            if (this.type === "add") {
                rules = rules.concat([
                    {
                        case: !password,
                        message: "密码长度至少为6位",
                    },
                    {
                        case: password.length < 6,
                        message: "请输入密码",
                    },
                ])
            }

            const valid = this.$validForm(rules)

            if (!valid) {
                return
            }

            const url = this.type === "add" ? "/api/user/register" : "/api/user/update";
            const { code } = await this.$fetch.post(
                url,
                this.formData
            );
            if (code === 0) {
                this.$message.success(this.type === "add" ? "新增用户成功" : "修改成功");
                this.cancel();
                return;
            }
        },


        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh");
        },
    }
}

</script>

<style scoped>
::v-deep .preview-image {
    width: 120px;
}
</style>